﻿@model dynamic
@using Entropy.Ext
@using Entropy.Ext.Samples.Controllers
@using NJection.LambdaConverter.Fluent

@* ReSharper disable InconsistentNaming *@
@{
    Layout = null;
    var ext = this.Ext();
    var Ext = ext;
}
@* ReSharper restore InconsistentNaming *@


<!DOCTYPE html>

<html>
    <head><title>Customer Search</title>
 
<style>
               
    .header {
    font-size: 16px;
    color: #fff;
    font-weight: normal;
    padding: 5px 10px;
}        
</style>

<link rel="stylesheet" type="text/css" href="../../ExtJs/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ExtJs/ext-all-debug.js"></script>
<script type="text/javascript">
    Ext.onReady(function () {
        @{
            var contentPanel = Ext.CreateTabPanel(
                region: Region.Center
                //plain: true
                //layout: ,
                //margins: "2 5 5 0",
                //border: false
            );

            var treeStore = Ext.CreateTreeStore(
                root: Ext.Node(
                    expanded: true,
                    children: new[] {
                Ext.Node(text: "Folder1", children: new [] {
                    Ext.Node(leaf: true, text: "Demo1",          hrefTarget: Html.ActionUrl<DemoController>(c => c.Nothing()))
                }),
                Ext.Node(text: "Folder2", children: new [] {
                    Ext.Node(leaf: true, text: "Demo2",            hrefTarget: Html.ActionUrl<DemoController>(c => c.Nothing()))
                })
            }
                )
            );
            var treeSel = ext.RowSelection();

            var treePanel = Ext.CreateTreePanel(
                region: Region.North,
                split: true,
                height: 360,
                minSize: 150,
                useArrows: true,
                rootVisible: false,
                singleExpand: true,
                store: treeStore,
                selModel: treeSel

                //bodyPadding: "5, 10, 10,10",
            );

            contentPanel.add(Ext.CreateNewTab("title", null));
            TreeSelectionChange treeSelChange = (model, selected, opts) =>
            {
                if (selected[0].data.leaf)
                    return contentPanel.add(Ext.CreateNewTab(selected[0].data.text, Ext.Loader(selected[0].data.hrefTarget, true, false, true)));
                return null;
            };

            var delegat = treeSelChange as Delegate;
            var lambda = Lambda.TransformMethodTo<TreeSelectionChange>()
                                     .From(() => treeSelChange)
                                     .WithContextOf(delegat.Target)
                                     .ToLambda();

    
            treeSel.selectionchange = lambda;

            // This is the Details panel that contains the description for each example layout.
            var detailsPanel = Ext.CreatePanelPanel(
                id: "details-panel",
                title: "Details",
                region: Region.Center,
                bodyStyle: "padding-bottom:15px;background:#eee;",
                //autoScroll: true,
                html: "<p class=\"details-info\">When you select a layout from the tree, additional details will display here.</p>"
            );

            var viewport = ext.CreateViewport(
                items: new IBase[]
            {
                Ext.CreatePanelPanel(
                    layout: ExtLayout.Border,
                    region: Region.West,
                    border: false,
                    split:true,
                    collapsible: true,
                    margins: "2 0 5 5",
                    width: 275,
                    minSize: 100,
                    maxSize: 500,
                    items:new [] {
                        treePanel, 
                        detailsPanel
                    }),
                contentPanel    
            },
                layout: ExtLayout.Border,
                title: "Entropy.Ext Demo"
            );    
    @viewport
}
    });

    </script>
</head>
<body>
</body>
</html>